<template>
  <div class="loginPage">
    <Transition
      name="custom-classes"
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <component
        :is="showLogin ? loginPage : registerPage"
        @changeShowLogin="changeShowLogin"
      ></component>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import loginPage from "@/views/login/index.vue";
import registerPage from "@/views/register/index.vue";
import { ref } from "vue";
let showLogin = ref(true);

const changeShowLogin = (bol) => {
  showLogin.value = bol;
};
</script>

<style lang="scss" scoped>
.loginPage {
  background-color: rgb(231, 250, 255);
  height: 100%;
  display: flex;
  justify-content: right;
  padding-right: 0.3rem;
  position: relative;
}

//css
.list-move, /* 对移动中的元素应用的过渡 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
.list-leave-active {
  position: absolute;
}
</style>
